<template>
  <div>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>物资管理</el-breadcrumb-item>
        <el-breadcrumb-item>物资库存</el-breadcrumb-item>
    </el-breadcrumb>
      <div class="stocks">
        <div>
          <el-card class="box-card" style="margin-top:20px;width:900px;height:500px;">
            <!-- 库存条形图 -->
            <bar-charts :datar="this.dataList"></bar-charts>
            
          </el-card>
          <el-card class="box-card" style="margin-top:20px;width:900px;height:300px;">
            <!-- 库存占比图 -->
            <Piechart :datar="this.dataList"></Piechart>
          </el-card>
        </div>
        <el-card class="box-card" shadow="never" style="width:100%;margin-top:20px;margin-left:30px;">
          <div class="table-container" >
              <!--表头-->
                <el-cascader
                  :options="options"
                  :props="defaultParams"
                  v-model="selectedOptions"
                  clearable
                ></el-cascader>
                <el-input placeholder="物资名称" style="width:200px;margin-left:20px" v-model="name" clearable></el-input>
                <el-button type="primary" style="width:90px;margin-left:20px" @click="handleSearch" icon="el-icon-search">搜索</el-button>
            
            <!--表格-->
            <el-table
                    border
                    :data="dataList"
                    ref="multipleTable"
                    style="width: 100%;margin-top:20px"
                    v-loading="isLoading"
            >
              <el-table-column
                      label="图片"
                      align="center"
                      width="100">
                  <template slot-scope="scope">
                      <img :src="scope.row.imageUrl" alt="" style="width: 40px; height: 40px;">
                  </template>
              </el-table-column>
              <el-table-column
                      label="名称"
                      align="center"
                      width="120">
                  <template slot-scope="scope">
                      {{scope.row.name}}
                  </template>
              </el-table-column>
              <el-table-column
                      label="规格"
                      align="center"
                      width="120">
                  <template slot-scope="scope">
                      <p>{{scope.row.model}}</p>
                  </template>
              </el-table-column>
              <el-table-column
                      label="库存"
                      align="center"
                      width="150">
                  <template slot-scope="scope">
                      <p>{{scope.row.stock}}</p>
                  </template>
              </el-table-column>
              <el-table-column
                      label="单位"
                      align="center"
                      width="150">
                  <template slot-scope="scope">
                      {{scope.row.unit}}
                  </template>
              </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[10,15,20,25]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                style="margin-top:20px">
            </el-pagination>
          </div>
        </el-card>
      </div>
  </div>
</template>

<script>
import Piechart from './Piechart.vue'
import BarCharts from './barCharts.vue';
export default {
  components:{
    Piechart,
    BarCharts
  },
  name:"stocks",
  data() {
    return {
      dataList:[],
      pageSize:10,  //每页多少条数据
      pageNum:1,    //当前是第几页
      total:null,
      name:"",
      value:"",
      isLoading:false,
      //级联选择器
      options:[],
      selectedOptions:[],
      defaultParams:{
        label:"name",
        value:"id",
        children:"children",
        expandTrigger: 'hover',
        checkStrictly: true,
      },
      
    }
  },
  created() {
    this.stocksList();
  },
  mounted() {
    //调用方法获取数据
      this.getList();
  },
  methods: {
    //获取库存列表数据
    async stocksList(){
      const res =  await this.$http.get("/product/findProductStocks?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"&name="+this.name+"&categorys="+this.selectedOptions);
      console.log("res=>",res)
      if(res.data.code===200){
        this.dataList = res.data.data.rows;
        this.total = res.data.data.total;
      }
    },
    //从后台获取级联选择器数据
    getList(){
        this.$http.get("/productCategory/categoryTree").then(res=>{
        //将获得的数据赋值给options
        this.options = res.data.data.rows;
        console.log("res=>",this.options);
      })
    },
    // 改变每页显示的条数
    handleSizeChange(val) {
        this.pageNum = 1;
        this.pageSize = val;
        // 重新加载数据
        this.stocksList();
    },
    // 切换页码
    handleCurrentChange(val) {
        this.pageNum = val;
        // 重新加载数据
        this.stocksList();
    },
    //搜索功能
    handleSearch(){
      if(this.roleName===null){
          this.$message.warning("请输入要搜索的角色名")
        }else{
          this.stocksList()
        }
    },
  },
  
}
</script>

<style lang="less" scoped>
  .stocks{
    display: flex;
  }
</style>>

